<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head >
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" th:href="@{/public/layui/css/layui.css}">
	<link rel="stylesheet" th:href="@{/public/validform/css/style.css}">
	<link rel="stylesheet" th:href="@{/public/webuploader/webuploader.css}">
	<!-- 配置文件 -->
	<script type="text/javascript" src="/public/ueditor/ueditor.config.js"></script>
	<!-- 编辑器源码文件 -->
	<script type="text/javascript" src="/public/ueditor/ueditor.all.js"></script>
	<style type="text/css">
		body{
			background: #fff;
		}
		.lable-item{
			background: #FFB800;
			color: #fff;
			display: inline-block;
			position: relative;
			width: 100px;
			padding: 5px;
			height: 30px;
			border-radius: 0px;
			line-height: 30px;
			text-align: center;
			margin-right: 10px;
			margin-bottom: 10px;
		}
		.lable-item .close{
			position: absolute;
			right: -7px;
			cursor: pointer;
			top: -8px;
			background: red;
			border-radius: 3px;
			width: 20px;
			height: 20px;
			line-height: 20px;
			border-radius: 10px;
		}
		.lable-content{
			width: 100%;
			height:30px;
			overflow: hidden;
		}
		.download-table td{
			padding: 5px;;
		}
	</style>
	<script type="text/javascript" th:src="@{/public/jquery/jquery-1.9.1.min.js}"></script>
	<script type="text/javascript" th:src="@{/public/webuploader/webuploader.min.js}"></script>
</head>

<body>
<div class="layui-fluid">
	<div class="layui-row" style="margin-bottom: 10px;">
				<span class="layui-breadcrumb">
				  <a href="">资源管理</a>
				  <a th:if="${siteType} eq 1" href="">文章管理</a>
				  <a th:if="${siteType} eq 2" href="">视频管理</a>
				  <a th:if="${siteType} eq 3" href="">软件管理</a>
				</span>
	</div>
	<form class="layui-form registerform" action="/admin/resouceContent/save" th:object="${data.data}">
		<input type="hidden" name="id" th:value="*{id}">
		<input type="hidden" name="siteType" id="siteType" th:value="${siteType}">
		<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
			<ul class="layui-tab-title">
				<li class="layui-this">基本信息</li>
				<li>SEO</li>
				<li>标签</li>
				<li>内容描述</li>
				<li th:if="${siteType} eq 2">视频地址</li>
				<li th:if="${siteType} eq 3">下载文件</li>
			</ul>
			<div class="layui-tab-content">
				<div class="layui-tab-item layui-show">

					<div class="layui-form-item">
						<label class="layui-form-label">文章标题</label>
						<div class="layui-input-block">
							<input type="text" name="title" th:value="*{title}" datatype="*"   nullmsg="文章标题不能为空！"  placeholder="请输入文章标题" class="layui-input">
							<div class="Validform_checktip"></div>
						</div>
					</div>


					<div class="layui-form-item">
						<label class="layui-form-label">摘要</label>
						<div class="layui-input-block">
							<textarea type="text" name="summary" datatype="*"   nullmsg="摘要不能为空！"  placeholder="请输入摘要" class="layui-textarea">[[*{summary}]]</textarea>
							<div class="Validform_checktip"></div>
						</div>
					</div>


					<div class="layui-form-item">
						<label class="layui-form-label">作者</label>
						<div class="layui-input-block">
							<input type="text" name="author" th:value="*{author}" datatype="*"   nullmsg="作者不能为空！"  placeholder="请输入作者" class="layui-input">
							<div class="Validform_checktip"></div>
						</div>
					</div>

					<div class="layui-form-item">
						<label class="layui-form-label">阅读次数</label>
						<div class="layui-input-block">
							<input type="text" name="clickCount" th:value="*{clickCount}" datatype="n"   nullmsg="阅读次数不能为空！"  placeholder="请输入阅读次数" class="layui-input">
							<div class="Validform_checktip"></div>
						</div>
					</div>

					<div class="layui-form-item">
						<label class="layui-form-label">缩率图</label>
						<div class="layui-input-block">
							<div id="filePicker1" style="display: inline-block;">上传</div>
							<div id="uploadlist1" style="display: inline-block;">
                                   <span th:if="*{thumbnailImg} != null">
                                        <img th:src="@{''+*{thumbnailImg}}" style="width:30px;height:30px;vertical-align: super;">
                                        <input type="hidden" name="thumbnailImg" th:value="*{thumbnailImg}">
                                   </span>
							</div>
							<div class="Validform_checktip"></div>
						</div>
					</div>

					<div class="layui-form-item">
						<label class="layui-form-label">分类</label>
						<div class="layui-input-block">
							<select name="resouceCatalog.id" th:utext="${selectHtml}">

							</select>
						</div>
					</div>


					<div class="layui-form-item">
						<label class="layui-form-label">是否显示</label>
						<div class="layui-input-block">
                            <span th:if="*{id} == null">
                                <input type="radio" name="isShow" value="1" title="是" checked>
                              <input type="radio" name="isShow" value="0" title="否" >
                            </span>

							<span th:if="*{id} != null">
                                <input type="radio" name="isShow" value="1" title="是" th:checked="*{isShow} eq 1">
                              <input type="radio" name="isShow" value="0" title="否"  th:checked="*{isShow} eq 0">
                            </span>
						</div>
					</div>

					<div class="layui-form-item">
						<label class="layui-form-label">是否推荐</label>
						<div class="layui-input-block">
                            <span th:if="*{id} == null">
                                <input type="radio" name="isRecommend" value="1" title="是" >
                                <input type="radio" name="isRecommend" value="0" title="否" checked >
                            </span>
							<span th:if="*{id} != null">
                                <input type="radio" name="isRecommend" value="1" title="是" th:checked="*{isRecommend} eq 1" >
                                <input type="radio" name="isRecommend" value="0" title="否" th:checked="*{isRecommend} eq 0">
                            </span>

						</div>
					</div>


					<div class="layui-form-item">
						<label class="layui-form-label">是否首页</label>
						<div class="layui-input-block">
                             <span th:if="*{id} == null">
                                <input type="radio" name="isHome" value="1" title="是" >
                                <input type="radio" name="isHome" value="0" title="否" checked>
                             </span>
							<span th:if="*{id} != null">
                                <input type="radio" name="isHome" value="1" title="是" th:checked="*{isHome} eq 1">
                                <input type="radio" name="isHome" value="0" title="否" th:checked="*{isHome} eq 0" >
                             </span>
						</div>
					</div>

					<div class="layui-form-item">
						<label class="layui-form-label">是否最新</label>
						<div class="layui-input-block">
                                <span th:if="*{id} == null">
                                    <input type="radio" name="isNews" value="1" title="是" >
                                    <input type="radio" name="isNews" value="0" title="否" checked>
                                </span>
							<span th:if="*{id} != null">
                                    <input type="radio" name="isNews" value="1" title="是" th:checked="*{isNews} eq 1">
                                    <input type="radio" name="isNews" value="0" title="否" th:checked="*{isNews} eq 0">
                                </span>
						</div>
					</div>

				</div>


				<div class="layui-tab-item ">

					<div class="layui-form-item">
						<label class="layui-form-label">SEO关键字</label>
						<div class="layui-input-block">
							<input type="text" name="seoKeyword" th:value="*{seoKeyword}" placeholder="SEO关键字" class="layui-input">
							<div class="Validform_checktip"></div>
						</div>
					</div>


					<div class="layui-form-item">
						<label class="layui-form-label">SEO描述</label>
						<div class="layui-input-block">
							<textarea type="text" name="seoDescription" placeholder="SEO描述" class="layui-textarea">[[*{seoDescription}]]</textarea>
							<div class="Validform_checktip"></div>
						</div>
					</div>


				</div>

				<div class="layui-tab-item ">
					<div class="layui-form-item">
						<label class="layui-form-label">标签</label>
						<div class="layui-input-block">
							<div >
								<button class="layui-btn layui-btn-primary" onclick="openLable()" type="button">选择标签</button>
							</div>

							<div class="layui-row" style="margin-top: 5px;" id="lable-main">
                                <span th:if="*{id} != null">
                                    <div class="lable-item" th:each="vo:${lableList.data}" th:style="'background:'+${vo.resouceLable.color}+';'">
                                        <input type="hidden" name="lableId" th:value="${vo.resouceLable.id}">
                                        <div class="lable-content" th:text="${vo.resouceLable.name}">jsp</div>
                                        <i class="layui-icon-close layui-icon close"></i>
                                    </div>
                                </span>
							</div>
						</div>
					</div>

				</div>

				<div class="layui-tab-item ">

					<div class="layui-form-item">
						<label class="layui-form-label">内容描述</label>
						<div class="layui-input-block">
							<textarea type="text" id="description" name="description" placeholder="描述" style="height: 100px;" >[[*{description}]]</textarea>
							<div class="Validform_checktip"></div>
						</div>
					</div>

				</div>

				<div class="layui-tab-item" th:if="${siteType} eq 2">
					<div style="margin-bottom: 10px;margin-top: 10px;">
						<button class="layui-btn layui-btn-normal" onclick="videoAdd()" type="button" >新增</button>
					</div>
					<table class="layui-table">
						<thead>
						<tr>
							<th>视频名称</th>
							<th>地址</th>
							<th>集数</th>
							<th>操作</th>
						</tr>
						</thead>
						<tbody id="videoMain"  >
						<div th:if="${videoData} != null">
							<tr th:each="vo:${videoData.data}">
								<td>
									<input type="text" name="videoTitle" class="layui-input" th:value="${vo.title}">
								</td>
								<td>
									<input type="text" name="videoUrl" class="layui-input"  th:value="${vo.url}">
								</td>
								<td>
									<input type="number" name="videoOrderSort" class="layui-input" th:value="${vo.orderSort}">
								</td>
								<td>
									<input type="button" onclick="removeVideo(this)" value="删除" class="layui-btn layui-btn-primary layui-btn-sm">
								</td>
							</tr>
						</div>
						</tbody>
					</table>

					<script type="text/javascript">
                        function videoAdd(){
                            var html=' <tr>'+
                                ' <td>'+
                                '<input type="text" name="videoTitle" class="layui-input">'+
                                ' </td>'+
                                ' <td>'+
                                ' <input type="text" name="videoUrl" class="layui-input">'+
                                '  </td>'+
                                ' <td>'+
                                ' <input type="number" name="videoOrderSort" class="layui-input">'+
                                '</td>'+
                                '<td>'+
                                ' <input type="button" onclick="removeVideo(this)" value="删除" class="layui-btn layui-btn-primary layui-btn-sm">'+
                                '</td>'+
                                '</tr>';
                            $("#videoMain").append(html);
                        }

                        function removeVideo(obj){
                            $(obj).parent().parent().remove();
                        }
					</script>

				</div>

				<div class="layui-tab-item" th:if="${siteType} eq 3">

					<div class="layui-form-item">
						<label class="layui-form-label">文件</label>
						<div class="layui-input-block">
							<div id="downloadFileUpload" style="display: inline-block;">上传</div>
							<hr/>

							<div class="layui-card">
								<div class="layui-card-body" id="download-main">
									<div th:if="${fileData} != null">
										<div th:if="${fileData.data} != null">
											<table style="width: 100%;" class="download-table">
												<tr>
													<td width="10%">文件名称:</td>
													<td th:text="${fileData.data.fileName}">腾讯游戏盒子2013官网页面html代码.zip</td>
												</tr>
												<tr>
													<td>文件大小:</td>
													<td  th:text="${fileData.data.fileSize}">100kb</td>
												</tr>
												<tr>
													<td>下载次数:</td>
													<td  th:text="${fileData.data.downloadCount}">100</td>
												</tr>
												<tr>
													<td>文件扩展名:</td>
													<td  th:text="${fileData.data.ext}">zip</td>
												</tr>
											</table>
											<input type="hidden" name="fileName" th:value="${fileData.data.fileName}">
											<input type="hidden" name="fileSize" th:value="${fileData.data.fileSize}">
											<input type="hidden" name="url" th:value="${fileData.data.url}">
											<input type="hidden" name="downloadCount" th:value="${fileData.data.downloadCount}">
											<input type="hidden" name="ext" th:value="${fileData.data.ext}">
										</div>
									</div>
								</div>


							</div>
						</div>
					</div>

					<script type="text/javascript">
                        var downloadFileuploader = WebUploader.create({
                            // 选完文件后，是否自动上传。
                            auto: true,
                            // swf文件路径
                            swf: '/public/webuploader/Uploader.swf',
                            // 文件接收服务端。
                            server: '/admin/resouceContent/upload',
                            fileVal:'file',
                            // 选择文件的按钮。可选。
                            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                            pick: '#downloadFileUpload',

                        });

                        downloadFileuploader.on( 'uploadSuccess', function( file,response ) {
                            var html=' <table style="width: 100%;" class="download-table">'+
                                ' <tr>'+
                                '  <td width="10%">文件名称:</td>'+
                                '   <td>'+response.name+'</td>'+
                                ' </tr>'+
                                ' <tr>'+
                                ' <td>文件大小:</td>'+
                                '<td>'+response.size+'</td>'+
                                ' </tr>'+
                                '<tr>'+
                                '<td>下载次数:</td>'+
                                '<td>0</td>'+
                                '</tr>'+
                                ' <tr>'+
                                ' <td>文件扩展名:</td>'+
                                '<td>'+response.ext+'</td>'+
                                '</tr>'+
                                '</table>';
                            $("#download-main").html(html);
                            $("#download-main").append("<input type='hidden' name='fileName' value='"+response.name+"' />");
                            $("#download-main").append("<input type='hidden' name='fileSize' value='"+response.size+"' />");
                            $("#download-main").append("<input type='hidden' name='url' value='"+response.url+"' />");
                            $("#download-main").append("<input type='hidden' name='downloadCount' value='0' />");
                            $("#download-main").append("<input type='hidden' name='ext' value='"+response.ext+"' />");
                        });
					</script>
				</div>


			</div>
		</div>






		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn layui-btn-normal" id="btn_sub" lay-submit="" lay-filter="demo1">立即提交</button>
				<button type="button" onclick="closeWin()" class="layui-btn layui-btn-primary">关闭</button>
			</div>
		</div>
	</form>


</div>

<script type="text/javascript" th:src="@{/public/artDialog/jquery.artDialog.js(skin=blue)}"></script>
<script type="text/javascript" th:src="@{/public/artDialog/plugins/iframeTools.js}"></script>
<script type="text/javascript" th:src="@{/public/validform/Validform_v5.3.2_min.js}"></script>

<script type="text/javascript" th:src="@{/public/js/common.js}"></script>
<script th:src="@{/public/layui/layui.all.js}"></script>
<script type="text/javascript">
    //关闭窗口
    function closeWin(){
        art.dialog.close();
    }

    $(function(){

        var uploader = WebUploader.create({
            // 选完文件后，是否自动上传。
            auto: true,
            // swf文件路径
            swf: '/public/webuploader/Uploader.swf',
            // 文件接收服务端。
            server: '/admin/upload',
            fileVal:'fileImg',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#filePicker1',
            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });

        uploader.on( 'uploadSuccess', function( file,response ) {
            var html="<img src='"+response.url+"' style='width:30px;height:30px;vertical-align: super;'/><input type='hidden' name='thumbnailImg' value='"+response.url+"'>";
            $("#uploadlist1").html(html);
        });

        //表单验证，采用异步提交
        $(".registerform").Validform({
            btnSubmit:"#btn_sub",
            tiptype:function(msg,o,cssctl){
                if(!o.obj.is("form")){//验证表单元素时o.obj为该表单元素，全部验证通过提交表单时o.obj为该表单对象;
                    var objtip=o.obj.siblings(".Validform_checktip");
                    cssctl(objtip,o.type);
                    objtip.text(msg);
                }
            },
            ajaxPost:true,
            callback:function(data){ //提交到服务器后回调的方法
                //返回数据data是json对象，{"info":"demo info","status":"y"}
                layui.use('layer', function(){
                    layer.msg(data.msg,{time:1000},function () {
                        if (data.status == 1) {
                            //回调父页面方法
                            art.dialog.opener.ajaxLoad();
                            //关闭窗口
                            art.dialog.close();
                        }
                    });
                });
            }
        });

        //监听标签
        $(document).delegate("#lable-main .lable-item .close","click",function(){
            $(this).parent().remove();
        })
    });


    function openLable(){
        var siteType=$("#siteType").val();
        s_open("选择标签","50%","70%","/admin/resouceContent/openResouceLable?siteType="+siteType);
    }

    function selectedOneLable(id,name,color){
        var html='<div class="lable-item" style="background: '+color+';">'+
            ' <input type="hidden" name="lableId" value="'+id+'">'+
            '<div class="lable-content">'+name+'</div>'+
            ' <i class="layui-icon-close layui-icon close"></i>'+
            '</div>';
        $("#lable-main").append(html);
    }

</script>

<!-- 实例化编辑器 -->
<script type="text/javascript">
    $(function(){
        setTimeout(function(){
            var ue = UE.getEditor('description',{
                initialFrameHeight: 300
            });

        },300);
    });
</script>

<script type="text/javascript">
    layui.use(["form"],function(){
        var form=layui.form;
        $("select[name='catalogId'] option:eq(0)").remove();
        form.render('select');
    });

</script>
</body>

</html>